<template>
    <el-form :model="propJson" label-width="auto" style="width: 100%">

        <el-form-item label="高度">
            <el-input v-model="propJson.height" style="width: 100%" placeholder="高度" />
        </el-form-item>

        <el-form-item label="地址">
            <el-input v-model="propJson.src" style="width: 100%" placeholder="地址" />
        </el-form-item>

        <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" >
            <el-button type="primary" class="addCollapse" size="small" @click="addSrcVariable()">添加地址参数</el-button>
        </div>

        <el-form label-width="auto" style="width: 100%">
            <el-collapse>
                <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in propJson.paramList">
                    <template #title>
                        <div class="collapseTitle">
                            <span>参数 {{(paramIndex + 1)}}</span>
                            <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteSrcVariable(paramIndex)">删除</el-button>
                        </div>
                    </template>
                    <el-form-item label="参数类型">
                        <el-radio-group v-model="paramItem.type">
                            <el-radio label="custom">自定义</el-radio>
                            <el-radio label="variable">关联变量</el-radio>
                            <el-radio label="urlQuery">URL地址变量</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="参数名称">
                        <el-input v-model="paramItem.variableName" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="参数值" v-if="paramItem.type === 'custom'">
                        <el-input v-model="paramItem.variableValue" style="width: 100%">
                            <template #prepend>
                                <el-select v-model="paramItem.variableType" placeholder="Select" style="width: 115px">
                                    <el-option label="字符串" value="String" />
                                    <el-option label="数组" value="Array" />
                                    <el-option label="对象" value="Object" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="URL地址参数名称" v-if="paramItem.type === 'urlQuery'">
                        <el-input v-model="paramItem.variableValue" style="width: 100%" />
                    </el-form-item>

                    <el-form-item label="变量名称" v-if="paramItem.type === 'variable'">
                        <el-select v-model="paramItem.variableParamName" placeholder="变量名称" style="width: 100%">
                            <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                        </el-select>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>
        </el-form>

    </el-form>
</template>

<script setup lang="ts" name="ExternalIframeDrawer">
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode.ts";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addSrcVariable() {
    if (!propJson.value.paramList) {
        propJson.value.paramList = []
    }
    let variableInfo = {variableName: "", variableValue: "", type: "custom", variableType: "String", variableParamName: ""}
    propJson.value.paramList.push(variableInfo)
}

function deleteSrcVariable(paramIndex:any) {
    // 删除数组中的数据
    propJson.value.paramList.splice(paramIndex, 1);
}
</script>

<style scoped lang="less">

</style>